<template>
    <div>
        <el-autocomplete
            popper-class="my-autocomplete"
            v-model="newClassifys.name"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        >
            <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
            </template>
        </el-autocomplete>
        <el-row>
            <el-button type="primary" @click="addClassifys(newClassifys)"
                >确认新增</el-button
            >
        </el-row>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("classifysList");
export default {
    data() {
        return {
            restaurants: [],
            state: "",
        };
    },
    computed: {
        ...mapState(["newClassifys"]),
    },
    methods: {
        ...mapActions(["addClassifys"]),
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        loadAll() {
            return [];
        },
        handleSelect(item) {
            console.log(item);
        },
        handleIconClick(ev) {
            console.log(ev);
        },
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
};
</script>

<style scoped lang=scss>
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>